<script setup lang="ts">
const props = defineProps<{
    title: string,
    num: number,
    type: 'music' | 'cd',
    click: () => void
}>()
</script>
<template>
    <div class="title">
        <h2>{{ `${props.title}(${props.num})` }}</h2>
        <div @click="click" class="upload">
            <img class="icon" src="../../assets/upload-999.svg">
            <span v-if="props.type == 'music'">上传音乐</span>
            <span v-else-if="props.type == 'cd'">创建专辑</span>
        </div>
    </div>
</template>
<style lang="css" scoped>
.upload {
    text-align: center;
    display: flex;
    cursor: pointer;
}

.upload .icon {
    height: 20px;
    width: 20px;
}

.title {
    flex: 1;
    border-bottom: 2px solid var(--red-style);
    justify-content: space-between;
    display: flex;
    align-items: baseline;
}

.title h2 {
    font-weight: normal;
    margin-bottom: 10px
}
</style>